import "./index.scss";
import React, {useEffect, useState} from "react";
import {useRequest} from "ahooks";

import {useAudioPlayer} from "@src/store/music";
import {songsType, songUrl} from "@src/services/music.ts";

type PlayBtnProps = {
    songs: songsType,
    ref?: React.RefObject<HTMLDivElement | null>
    onChangePlay?: (b: boolean) => void;
} & React.InputHTMLAttributes<HTMLDivElement>;

export default function PlayBtn({songs, onChangePlay, ...props}: PlayBtnProps) {
    // 从 useAudioPlayer 中获取音频播放相关的状态和方法
    const {setSongUrlData, play, pause, isPlaying, setSong, song} = useAudioPlayer();
    // 使用 useRequest 封装 songUrl 请求，手动触发请求
    const songUrlApi = useRequest(songUrl, {defaultParams: [songs.id], manual: true});
    // 定义本地状态 isPlay，用于控制播放按钮的显示状态
    const [isPlay, setIsPlay] = useState<boolean>(false);

    useEffect(() => {
        onChangePlay?.(isPlay)
    }, [isPlay, onChangePlay]);

    // 播放按钮点击事件处理函数
    const onIsPlayChange = () => {
        // 如果 songUrlApi 的数据为空，说明需要获取歌曲的播放链接
        if (songUrlApi.data == undefined) {
            if (songs.id != song.id) {
                // 调用 songUrlApi.runAsync 请求歌曲的播放链接
                songUrlApi.runAsync(songs.id).then((data) => {
                    // 设置当前播放的歌曲信息
                    setSong(songs);
                    // 设置歌曲的播放链接
                    setSongUrlData(data);
                    // 设置本地播放状态为 true
                    setIsPlay(true);
                    // 调用 play 方法开始播放
                    play();
                });
            } else {
                if (isPlay) {
                    // 如果正在播放，则调用 pause 方法暂停播放
                    pause();
                } else {
                    // 如果未播放，则调用 play 方法开始播放
                    play();
                }
                // 切换本地播放状态
                setIsPlay(!isPlay);
            }
        } else {
            // 如果 songUrlApi 的数据不为空，说明已经获取到了歌曲的播放链接
            // 判断点击的歌曲是否与当前播放的歌曲相同
            if (songs.id != song.id) {
                // 如果不同，更新当前播放的歌曲信息和播放链接，并开始播放
                setSong(songs);
                setSongUrlData(songUrlApi.data);
                setIsPlay(true);
                play();
            } else {
                // 如果点击的歌曲与当前播放的歌曲相同
                // 判断当前是否正在播放
                if (isPlay) {
                    // 如果正在播放，则调用 pause 方法暂停播放
                    pause();
                } else {
                    // 如果未播放，则调用 play 方法开始播放
                    play();
                }
                // 切换本地播放状态
                setIsPlay(!isPlay);
            }
        }
    };

    // 使用 useEffect 监听 isPlaying、song.id 和 songs.id 的变化
    useEffect(() => {
        // 如果点击的歌曲与当前播放的歌曲相同，则更新本地播放状态为 isPlaying
        if (songs.id == song.id) {
            setIsPlay(isPlaying);
        } else {
            // 如果不同，则将本地播放状态设置为 false
            setIsPlay(false);
        }
    }, [isPlaying, song.id, songs.id]);

    // 渲染播放按钮，根据 isPlay 的值添加对应的类名，并绑定点击事件
    return <div className={"play-btn " + (isPlay && "isPlay")} {...props} onClick={onIsPlayChange}></div>;
}